<template>
  <div>
    <el-card >
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="关键词搜索">
          <el-input v-model="formInline.str" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formInline.time"
            type="monthrange"
            value-format="yyyy-MM"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="my-3 py-1 px-2 greay-bg">
      <span>image</span>
    </div>
    <el-table :data="tableData" style="width: 100%" border height="500">
      <el-table-column prop="title" label="类型" width="66"></el-table-column>
      <el-table-column prop="title" label="公告标题"></el-table-column>
      <el-table-column prop="title" label="地区" width="100"></el-table-column>
      <el-table-column prop="title" label="时间" width="100"></el-table-column>

      <el-table-column label="代购状态" width="120">
        <div slot-scope="scope">
          {{ scope.row.status }}
        </div>
      </el-table-column>
    </el-table>
    <el-row class="mt-2" type="flex" align="center" justify="center">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script scoped>
export default {
  name: "",
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 1000,
      formInline: {
        str: "",
        time: ''
      },
    };
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {

    },
    handleCurrentChange(page) {  },
    handleSearch() {},
  },
};
</script>

<style scoped lang="scss">
.greay-bg {
  background: #eeeeee;
}
::v-deep.el-date-editor--monthrange.el-input__inner {
  width: 220px;
}
</style>